<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {getHonorListApi, getHonorWallApi, getStudentListApi, getStuHonorListApi} from "@/api/school.js";
import {formatDateNoTime} from "@/utils/index.js";
import ImagePreview from "@/components/ImagePreview/index.vue";
import {isExternal} from "@/utils/validate.js";
import {useRouter} from "vue-router";

const {proxy} = getCurrentInstance();
const router = useRouter()
const state = reactive({
  searchForm: {
    stuName: '',
    wallType: 1,
    fileType: 'image',
    startTime: '',
    endTime: '',
    certType: '',
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    stuName: '',
    stuFaculties: '',
    stuClass: '',
  },
  detailsForm: {
    wallType: 1,
    fileType: 'image',
    id: '',
  },
  total: 0,
  tableData: [],
  btns1: [{
    name: '学术成果',
    id: 1,
  }, {
    name: '实战成果',
    id: 2,
  }, {
    name: '技能证书',
    id: 4,
  }],
  btns2: [{
    name: '图片',
    id: 'image',
  }, {
    name: '视频',
    id: 'video',
  }, {
    name: '文档',
    id: 'document',
  }],
  studentList: [], // 学生列表
  honorTopThree: [],
  userId: '',
  detailsFormList: [],
})

const showDia1 = ref(false)

const selectable = (row) => ![].includes(row.id)


const handleDeTails = (row) => {
  router.push({
    path: '/baseData/comprehensiveIn/schoolHonor',
    query:{
      id: row.id
    }
  })
}

const getStudentList = async () => {
  const res = await getStudentListApi()
  if (res.code == 200) {
    state.studentList = res.data
  }
}

const changeTime = (e) => {
  state.searchForm.startTime = formatDateNoTime(e[0])
  state.searchForm.endTime = formatDateNoTime(e[1])
}

const searchStudent = async (query) => {
  const res = await getStudentListApi({stuName: query})
  if (res.code == 200) {
    state.studentList = res.data
  }
}

const handleSearch = async () => {
  const res = await getHonorWallApi(state.searchForm)
  if (res.code == 200) {
    state.honorTopThree = res.data
  }
}

const resetSearch2 = () => {
  state.searchForm = {
    stuName: '',
    wallType: 1,
    fileType: 'image',
    startTime: '',
    endTime: '',
    certType: '',
  }

  handleSearch()
}

function getRealSrc(src) {
  if (!src) {
    return;
  }
  let real_src = src.split(",")[0];
  if (isExternal(real_src)) {
    return real_src;
  }
  return import.meta.env.VITE_APP_BASE_API + real_src;
}

const handleShowDocument = (src) => {
  const filePath = getRealSrc(src)
  window.open(filePath)
}

const getDataList = async () => {
  const res = await getHonorListApi(state.queryParams)
  if (res.code == 200) {
    state.tableData = res.rows
    state.total = res.total
  }
}

const resetSearch = () => {
  proxy.resetForm("queryRef");
  state.queryParams = {
    pageNum: 1,
    pageSize: 10,
  }
  getDataList()
}

// 获取某个学生的所有荣誉
const getStuHonorList = async () => {
  const res = await getStuHonorListApi(state.detailsForm)
  if (res.code == 200) {
    state.detailsFormList = res.data
  }
}
onMounted(() => {
  getStudentList()
  handleSearch()
  getDataList()
})
</script>

<template>
  <div class="outBox">
    <div class="topBox">
      <el-card class="card1">
        <div class="header">
          <div class="tit">荣誉展示</div>
          <div class="select">
            <span>姓名</span>
            <el-select v-model="state.searchForm.stuId"
                       placeholder="请选择"
                       style="width: 200px;"
                       filterable
                       remote
                       reserve-keyword
                       clearable
                       :remote-method="searchStudent">
              <el-option v-for="item in state.studentList" :key="item.id"
                         :label="`${item.stuClass}-${item.stuName}`" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="items">
          <div class="item" v-for="item in state.honorTopThree">
            <div class="img" v-if="item.acFileType === 'image'">
              <ImagePreview :src="item.acFile"/>
            </div>
            <div class="img" v-else-if="item.acFileType === 'video'">
              <VideoPreview :src="item.acFile" width="100%"/>
            </div>
            <div class="img" v-else-if="item.acFileType === 'document'">
              <div class="document">
                <el-link type="primary" @click="handleShowDocument(item.acFile)">查看文档</el-link>
              </div>
            </div>
            <div class="name">{{ item.stuName }}</div>
            <div class="tip">
              {{ item.acTitle }}
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="card2">
        <div class="formItems">
          <div class="item">
            <div class="name">时间选择</div>
            <el-date-picker
                @change="changeTime"
                style="width: calc(100% - 120px);"
                class="picker"
                v-model="state.searchForm.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            />
          </div>
          <div class="item">
            <div class="name">类别选择</div>
            <div class="btns btns2">
              <div class="btn" v-for="(item,index) in state.btns1" @click="state.searchForm.wallType = item.id">
                <el-button :type="state.searchForm.wallType === item.id ? 'primary' : ''" style="width: 100%;">
                  {{ item.name }}
                </el-button>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="name">展示格式</div>
            <div class="btns btns2">
              <div class="btn" v-for="(item,index) in state.btns2" @click="state.searchForm.fileType = item.id">
                <el-button :type="state.searchForm.fileType === item.id ? 'primary' : ''" style="width: 100%;">
                  {{ item.name }}
                </el-button>
              </div>
            </div>
          </div>
          <!--          <div class="item">-->
          <!--            <div class="name">竞赛级别</div>-->
          <!--            <div class="btns btns2">-->
          <!--              <div class="btn">-->
          <!--                <el-button type="primary" style="width: 100%;">省级</el-button>-->
          <!--              </div>-->
          <!--              <div class="btn">-->
          <!--                <el-button style="width: 100%;">市级</el-button>-->
          <!--              </div>-->
          <!--              <div class="btn">-->
          <!--                <el-button style="width: 100%;">校级</el-button>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
          <div class="centerBtns">
            <div class="btn">
              <el-button @click="resetSearch2">重置清空</el-button>
            </div>
            <div class="btn">
              <el-button type="primary" @click="handleSearch">确认</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <CardBox title="荣誉展示" style="position: relative">
      <template #btn-cont>
        <el-button type="primary" @click="getDataList">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </template>
      <template #content>
        <div class="searchForm">
          <el-form :model="state.queryParams" label-width="auto" inline="true">
            <el-form-item label="姓名">
              <el-select v-model="state.queryParams.id"
                         placeholder="请选择"
                         style="width: 200px;"
                         filterable
                         remote
                         reserve-keyword
                         clearable
                         :remote-method="searchStudent">
                <el-option v-for="item in state.studentList" :key="item.id"
                           :label="`${item.stuClass}-${item.stuName}`" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="院系">
              <el-input v-model="state.queryParams.stuFaculties" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="班级">
              <el-input v-model="state.queryParams.stuClass" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="户籍地">
              <el-input v-model="state.queryParams.stuPlace" placeholder="请输入"/>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="state.tableData" style="width: 100%">
          <!--          <el-table-column type="selection" :selectable="selectable" width="55"/>-->
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column prop="stuName" label="姓名" align="center"/>
          <el-table-column prop="stuNum" label="学号" align="center"/>
          <el-table-column prop="stuFaculties" label="院系" align="center"/>
          <el-table-column prop="yearEnrollment" label="年级" align="center">
            <template #default="scope">
              {{ scope.row.yearEnrollment }}级
            </template>
          </el-table-column>
          <el-table-column prop="stuClass" label="班级" align="center"/>
          <el-table-column prop="stuPlace" label="户籍地" align="center"/>

          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" link @click="handleDeTails(scope.row)">荣誉详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pageBox">
          <pagination
              v-show="state.total > 0"
              :total="state.total"
              v-model:page="state.queryParams.pageNum"
              v-model:limit="state.queryParams.pageSize"
              @pagination="getDataList()"
          />
        </div>
      </template>
    </CardBox>
    <el-dialog :title="state.title" v-model="showDia1" width="800" center fullscreen>
      <div class="diaBox">
        <el-form label-width="auto">
          <el-form-item label="荣誉类型">
            <el-select v-model="state.detailsForm.wallType" placeholder="请选择" style="width: 200px;"
                       @change="getStuHonorList">
              <el-option :label="item.name" :value="item.id" v-for="item in state.btns1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="材料类型">
            <el-select v-model="state.detailsForm.fileType" placeholder="请选择" style="width: 200px;"
                       @change="getStuHonorList">
              <el-option :label="item.name" :value="item.id" v-for="item in state.btns2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <div class="content">
          <div class="items items2">
            <div class="item" v-for="item in state.detailsFormList">
              <div class="img" v-if="item.acFileType === 'image'">
                <ImagePreview :src="item.acFile"/>
              </div>
              <div class="img" v-else-if="item.acFileType === 'video'">
                <VideoPreview :src="item.acFile" width="100%"/>
              </div>
              <div class="img" v-else-if="item.acFileType === 'document'">
                <div class="document">
                  <el-link type="primary" @click="handleShowDocument(item.acFile)">查看文档</el-link>
                </div>
              </div>
              <div class="name">{{ item.stuName }}</div>
              <div class="tip">
                {{ item.acTitle }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="diaFooter">
          <el-button @click="showDia1 = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.diaBox {
  min-height: 90vh;
}

.document {
  width: 100%;
  height: 250px;
  border: 1px solid #e8e8e8;
  display: flex;
  justify-content: center;
  align-content: center;
}

.centerBtns {
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    &:nth-child(1) {
      margin-right: 20px;
    }
  }
}

.formItems {
  .item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;

    :deep(.el-button+.el-button) {
      margin-left: 0px;
    }

    :deep(.el-button) {
      height: 35px !important;
    }

    .btns2 {
      .btn {
        width: 30%;
      }
    }

    .btns {
      flex: 1;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .btn {
        margin-bottom: 10px;

        &:nth-child(3) {
          margin: 0;
        }
      }
    }

    .name {
      width: 80px;
      white-space: nowrap;
    }
  }
}

.items {
  margin-top: 20px;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(3, 1fr);

  .item {
    .name {
      text-align: center;
      margin: 10px 0px;
      font-weight: 500;
      font-size: 22px;
    }

    .tip {
      font-weight: 800;
      color: #000000;
      text-align: center;
    }

    .img {
      width: 100%;

      img {
        width: 100%;
      }
    }
  }
}

.items2 {
  grid-template-columns: repeat(6, 1fr);
}

.topBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  .card2 {
    width: 38%;
  }

  .card1 {
    width: 60%;


    .header {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;

      .tit {
        font-weight: 800;
        font-size: 28px;
        color: #152584;
      }

      .select {
        display: flex;
        align-items: center;

        span {
          font-weight: 500;
          font-size: 14px;
          color: #484848;
          // 禁止换行
          white-space: nowrap;
          margin-right: 20px;
        }
      }
    }
  }
}

.searchForm {
  position: absolute;
  top: 15px;
  left: 120px;
}
</style>
